<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :label="column.label"
      :prop="column.prop"
    ></el-table-column>
  </el-table>
</template>

<script>
/**
 * 我们使用了<el-table-column>的v-for指令来循环生成列。每个列使用label属性作为列标题，而prop属性则用于指定数据源中对应的属性名。通过遍历columns数组，我们生成了与数据对象属性对应的列。

这样，循环后的<el-table>会根据columns数组的长度生成相应的列，每列的标题和数据来自于columns数组中对应的元素。F
 *
 */
export default {
  data () {
    return {
      tableData: [
        { name: 'John Doe', age: 30, email: 'john.doe@example.com' },
        { name: 'Jane Smith', age: 28, email: 'jane.smith@example.com' },
        { name: 'Bob Johnson', age: 35, email: 'bob.johnson@example.com' }
      ],
      columns: [
        { label: 'Name', prop: 'name' },
        { label: 'Age', prop: 'age' },
        { label: 'Email', prop: 'email' }
      ]
    }
  }
}
</script>
